<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
	<base href="<%=basePath%>">
    <title>实时监控</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7bfcb05227f0f4324410e3b17fe3ea00"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <style type="text/css">
		body{
			margin:0;
			height:100%;
			width:100%;
			position:absolute;
		}
		#mapContainer{
			height:100%;
			width:100%;
		}
		#tip{
			position:absolute;
			top: 220px;
			left:0px;
			height:50px;
			font-size:12px;
			background-color:#FFFFFF;
			border:1px solid #ccc;
			border-radius:3px;
		}
		#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		
.run{
padding: 2px;
font-size: 12px;
color: white;
border-radius: 3px;
background-color: #009F28;
}
.off{
padding: 2px;
font-size: 12px;
color: white;
border-radius: 3px;
background-color: #BEBEBE;
}
.warning{
padding: 2px;
font-size: 12px;
color: white;
border-radius: 3px;
background-color: #CC6701;
}
.anchorBL{  
       display:none;  
   }  
	</style>
	<script src="<%=basePath%>scripts/boot.js" type="text/javascript"></script> 
	<link rel="stylesheet" href="<%=basePath%>css/start_v5.css" />
	<script type="text/javascript" src="<%=basePath%>scripts/js/plugin/jquery.tipsy.js?v=20140326"></script>
	 <script type="text/javascript" src="<%=basePath%>APP/js/jquery-1.4.4.min.js"></script>
  </head>
  <body>
    <div id="allmap"></div>
 <div id="online_qq_layer">
  <div id="online_qq_tab">
    <div class="online_icon"> <a id="floatTrigger" href="javascript:void(0);"></a> </div>
  </div>
</div>
	<script type="text/javascript">
	var map = new BMap.Map("allmap");    // 创建Map实例,{mapType: BMAP_HYBRID_MAP}
	map.centerAndZoom(new BMap.Point(116.4100451627,39.916976551955), 5);  // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.enableScrollWheelZoom(true); 
	var data_info=new Array();
	var vehicleids="";
	 var oldvid = null;
	 var markerClusterer;
	 SelectGps(null);
	 setInterval(function(){
		 var display =$(".BMap_pop").css("display"); 
		 if(display=="none"){
			 oldvid = null;
		 }
		SelectGps(null);
	}, 5000);  
	 function CheckVehicle(ids){
			if(ids==null||ids==""){
				vehicleids="";
			}else{
				vehicleids=ids;
			}
			SelectGps(null);
	}
	 function ClickVehicle(id){
		 oldvid=id;
		 SelectGps(1);
	}
	function SelectGps(num){
			var uri="vehicle/selectGpsByOne.do?isbaidu=1";
			uri+="&&vehicleids="+vehicleids;	
			$.ajax({
				async: false,
				type : "post",
				url : uri,
				datatype: "json",
				success : function(data){
						var list = eval("(" + data + ")");
						map.clearOverlays();   
						data_info=new Array();
						for(var i=0;i<list.length;i++){
							if(list[i].istock==1){
								if(list[i].longitude!=null&&list[i].latitude!=null&&list[i].longitude!=0&&list[i].latitude!=0){
									var lng = list[i].longitude;
									var lat = list[i].latitude;
									var icontype="green";
									var state="<span class=\"run\">在线</span>";
									if(list[i].state==2){
										icontype="gray";
										state="<span class=\"off\">离线</span>";
									}else if(list[i].state==3){
										icontype="orange";
										state="<span class=\"warning\">故障</span>";
									}
									if(list[i].vehicleid==oldvid){
										icontype="blue";
									}
									var arrpoin = new Array();
									arrpoin.push(lng);
									arrpoin.push(lat);  
									arrpoin.push("<b>VIN</b>："+list[i].vin+"<br/><b>数据时间</b>："+list[i].lastdate+"<br/><b>运行状态</b>："+state+"<br/>"+
									"<a style=\"float: right;\" class=\"mini-button mini-button-plain\" href=\"javascript:OpenSearch("+list[i].vehicleid+")\"><span class=\"mini-button-text  mini-button-icon icon-search\" >查看详情</span></a>");  
									arrpoin.push(icontype);
									arrpoin.push(list[i].vehiclename);
									arrpoin.push(list[i].vehicleid);
									data_info.push(arrpoin);
								}
							}
						}
						markerClusterer=null;
						var markers=[];
						//超过150个点 使用电聚合。
						if(data_info.length>150){
							for(var i=0;i<data_info.length;i++){
								var pt = new BMap.Point(data_info[i][0], data_info[i][1]);
								var myIcon = new BMap.Icon( "images/mach_marker_"+data_info[i][3]+".png", new BMap.Size(36,37));
								var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
								//map.addOverlay(marker);   
								var content = data_info[i][2];
								var title = data_info[i][4];
								var vid = data_info[i][5];
								addClickHandler(vid,title,marker);
								if(vid==oldvid){
									openInfoOld(vid,title,content,data_info[i][0],data_info[i][1]);
									if(num!=null){
										map.centerAndZoom(new BMap.Point(data_info[i][0], data_info[i][1]), 20);
									}
								}
								markers.push(marker);
							}
							
							markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers}); 
						}else{
							for(var i=0;i<data_info.length;i++){
							var pt = new BMap.Point(data_info[i][0], data_info[i][1]);
							var myIcon = new BMap.Icon( "images/mach_marker_"+data_info[i][3]+".png", new BMap.Size(36,37));
							var opts = {
							  offset: new BMap.Size(28, 5) // 设置文本偏移量
							}
							var label = new BMap.Label(data_info[i][4], opts); // 创建文本标注对象
							label.setStyle({
								color : "black", 
								border :"0",
								//bodyStyle: "color:black" ,
								//backgroundColor : null,  
								fontSize : "12px",
								fontFamily:"微软雅黑"
							});
							var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
							marker.setLabel(label); 
							map.addOverlay(marker);   
							var content = data_info[i][2];
							var title = data_info[i][4];
							var vid = data_info[i][5];
							addClickHandler(vid,title,marker);
							if(vid==oldvid){
								openInfoOld(vid,title,content,data_info[i][0],data_info[i][1]);
								if(num!=null){
									map.centerAndZoom(new BMap.Point(data_info[i][0], data_info[i][1]), 20);
								}
							}
						}
						
						}
						
						
					},
					error:function(data){alert("出错");}
				});
	}
	function addClickHandler(vid,name,marker){
		marker.addEventListener("click",function(e){
			 window.parent.window.clickRealdata();
		     window.location="APP/AppRealdata.jsp?vid="+vid+"&name="+name;
			}
		);
	}
	/**
  		 * 新建tab方法
  		 * 
  		 * @param {Object} parentTab
  		 * @param {Object} tabId	 
  		 * @param {Object} tabTitle
  		 * @param {Object} tabUrl
  		 */
		function createTab(parentTab, tabId, tabTitle, tabUrl) { 
			var	newTab = parentTab.add({
				id:tabId,
				title : tabTitle,
				closable : true,
				layout : 'fit',
				html : '<iframe scrolling="auto" border="0" frameborder="0" width="100%" height="100%" src="'+ tabUrl +'"></iframe>'
			});
			parentTab.setActiveTab(newTab);
		};
	function openInfo(vid,title,content,e){
		oldvid=vid;
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var opts = {
				width : 250,     // 信息窗口宽度
				height: 105,     // 信息窗口高度
				title : "<b>"+title+"</b>" , // 信息窗口标题
				enableMessage:false//设置允许信息窗发送短息
		};
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	function openInfoOld(vid,title,content,lng,lat){
		oldvid=vid;
		var point = new BMap.Point(lng,lat);
		var opts = {
				width : 250,     // 信息窗口宽度
				height: 105,     // 信息窗口高度
				title : "<b>"+title+"</b>" , // 信息窗口标题
				enableMessage:false//设置允许信息窗发送短息
		};
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	function OpenSearch(vehicleid){
		mini.open({                
	        url: "jsp/Vehicle_monitoring/Windows_vehicle_info.jsp?vehicleid="+vehicleid,    
	        showMaxButton: true,
	        title: "车辆实时监控信息",
	        width: "90%",
	        height: 620,
	        ondestroy: function (action) {  
	            /* if (action == "ok") {
	            } */
	        }
	    }); 
	}
	</script>
  </body>
</html>
